<template>
	<div class="main">
		<!-- 		<a-card class="footages" title="添加个人素材" @click="insert">
			<img src="../assets/cil-image-plus.svg" style="opacity: 0.3" />
		</a-card> -->
		<a-card class="footages" v-for="item,index in templateList" :span="6" :key="index">
			<div class="addBot" @click="addTemplate(item.id)">
				<SelectOutlined />
			</div>
			<div class="downBot" @click="downloadFootage(item)">
				<DownloadOutlined />
			</div>
			<div class="img"><img :src="item.src" /></div>
		</a-card>
		<Modal v-model="showModal" title="请选择" @on-ok="insertImgFile" @on-cancel="showModal = false,imgFile = null ">
			<Upload :before-upload="handleUpload" action="#">
				<Button icon="ios-cloud-upload-outline">选择图片文件</Button>
			</Upload>
			<img class="uploadImg" :src="imgFile" />
			<Input v-model="imgName" placeholder="请输入素材名称"></Input>
		</Modal>
	</div>
</template>
<script>
	import {
		getImgStr
	} from "@/utils/utils";
	import {
		v4 as uuid
	} from 'uuid';
	import {
		SelectOutlined,
		DownloadOutlined
	} from '@ant-design/icons-vue';
	export default {
		name: '推荐模板/rTemplate',
		components: {
			SelectOutlined,
			DownloadOutlined
		},
		data() {
			return {
				showModal: false,
				imgFile: '',
				imgName: '',
				templateList: [
        // {
				// 		name: '笔记模板',
				// 		tempUrl: './template/073606d4-22de-491b-8b51-b90d72101d89.json',
				// 		src: './template/073606d4-22de-491b-8b51-b90d72101d89.png',
				// 	},
				// 	{
				// 		name: '醒目封面',
				// 		tempUrl: './template/dcebee41-59b5-408b-a65a-c51bc390be3d.json',
				// 		src: './template/dcebee41-59b5-408b-a65a-c51bc390be3d.png',
				// 	},
				// 	{
				// 		name: '教师节',
				// 		tempUrl: './template/3a7471f2-b8cf-4939-ad1a-a7d586768640.json',
				// 		src: './template/3a7471f2-b8cf-4939-ad1a-a7d586768640.png',
				// 	},
				// 	{
				// 		name: '升职锦囊',
				// 		tempUrl: './template/ef5eb884-28e0-4d79-9e98-a73d759541f8.json',
				// 		src: './template/ef5eb884-28e0-4d79-9e98-a73d759541f8.png',
				// 	},
				// 	{
				// 		name: '古风模板',
				// 		tempUrl: './template/ecc3fca2-f66e-465e-b2c7-80b7522fdb3b.json',
				// 		src: './template/ecc3fca2-f66e-465e-b2c7-80b7522fdb3b.png',
				// 	},
				]
			}
		},
		methods: {
      initList() {
        this.$http.post(
            'api/posterEditor/getRTemplate/',
            {},
        ).then( res => {
          for(var item of res.data){
            this.templateList.push({
              id:item.pk,
              name:`模板${item.fields.r_template_name}`,
              src:'api/'+item.fields.r_template_png_src,
              tempUrl:'api/'+item.fields.r_template_src,
            })
          }
          console.log(this.templateList)
        })
      },
			insert() {
				this.imgFile = ''
				this.showModal = true
			},
			insertImgFile() {
				const imgEl = document.createElement('img');
				imgEl.src = this.imgFile
				// 插入页面
				document.body.appendChild(imgEl);

			},
			// 选择文件
			handleUpload(file) {
				getImgStr(file).then(res => {
					this.imgFile = res
				})
				return false;
			},
      addTemplate(id) {
        console.log("添加该id到个人素材");
        this.$http.post(
            'api/posterEditor/addITemplateFromR/',
            {
              token: this.$store.state.token,
              id: id,
            }
        ).then(res => {
          // if (res.data.code === 0){
          confirm(res.data.message)
          // }
        })
      },
			downloadFootage(item) {
				console.log("下载该id的图片");

				const fileUrl = item.src; // 文件的URL地址
				fetch(fileUrl, {
						mode: 'no-cors'
					})
					.then(response => response.blob())
					.then(blob => {
						const url = window.URL.createObjectURL(blob);
						const link = document.createElement('a');
						link.href = item.tempUrl;
						link.setAttribute('download', item.label);
						document.body.appendChild(link);
						link.click();
					})
					.catch(error => {
						console.error(error);
					});

				// //下载图片地址和图片名
				// var image = new Image();
				// // 解决跨域 Canvas 污染问题
				// image.setAttribute("crossOrigin", "anonymous");
				// image.onload = function() {
				// 	var canvas = document.createElement("canvas");
				// 	canvas.width = image.width;
				// 	canvas.height = image.height;
				// 	var context = canvas.getContext("2d");
				// 	context.drawImage(image, 0, 0, image.width, image.height);
				// 	var url = canvas.toDataURL("image/png"); //得到图片的base64编码数据
				// 	var a = document.createElement("a"); // 生成一个a元素
				// 	var event = new MouseEvent("click"); // 创建一个单击事件
				// 	a.download = item.name || "photo"; // 设置图片名称
				// 	a.href = url; // 将生成的URL设置为a.href属性
				// 	a.dispatchEvent(event); // 触发a的单击事件
				// };
				// image.src = "/api/static/2.png";
			},
		},
		mounted() {
      this.initList()
		}
	}
</script>
<style>
	.main {
		display: inline-block;
		background-color: rgb(80, 89, 110);
		width: 100%;
		min-height: 100%;
    padding-top: 8px;

  }

	.footages {
		height: 450px;
		text-align: center;
		display: inline-block;
		vertical-align: middle;
		width: 380px;
		/*height: 400px;*/
		margin-left: 5px;
		margin-right: 5px;
		margin-bottom: 15px;
		color: gray;


		.img {
			/*position: fixed;*/
			width: 100%;
			height: 400px;
			margin: auto;

			img {
				margin: auto;
				max-height: 100%;
				max-width: 100%;
				/*width: 100%;*/
				/*height: 100%;*/
			}
		}
	}

	.addBot {
		position: absolute;
		right: 15px;
		top: 15px;
		/* color: #ff0000; */
	}

	.downBot {
		position: absolute;
		right: 15px;
		top: 35px;
	}

	.uploadImg {
		max-height: 200px;
		max-width: 200px;
	}
</style>